// ** React Imports
import { useState } from 'react';

import AiPPTX from 'src/views/AiPPTX/AiPPTX'
import Setting from 'src/views/AiPPTX/Setting'

import { ReactNode } from 'react'

import { Box, Button } from '@mui/material';

import BlankLayout from 'src/@core/layouts/BlankLayout'

const AiPPTXModel = () => {

  const handleButtonClick = (url: string) => {
    window.open(url, '_blank', 'noopener,noreferrer'); // 打开新窗口
  };

  const [pageMode, setPageMode] = useState("AiToPPTX");

  return (
    <Box sx={{ 
      minHeight: '100vh', 
      position: 'relative', 
      background: 'radial-gradient(circle at center, rgba(248, 249, 255, 0.9) 0%, #FFFFFF 100%)',
      backgroundSize: 'cover',
      backgroundAttachment: 'fixed'
    }}>
      <Box sx={{ 
        padding: 3,
        paddingBottom: '80px', // 为底部固定导航留出空间
      }}>
        {pageMode == "AiToPPTX" && <AiPPTX />}
        {pageMode == "Setting" && <Setting />}
      </Box>
      <Box
        sx={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          padding: '16px',
          display: 'flex',
          justifyContent: 'center',
          gap: 2,
          boxShadow: '0 -2px 10px rgba(42, 92, 170, 0.25)',
          backdropFilter: 'blur(8px)',
          borderTop: '1px solid rgba(42, 92, 170, 0.15)',
          zIndex: 100
        }}
      >
        {/* <Button
          size={'small'}
          variant="outlined"
          sx={{
            borderColor: '#2A5CAA',
            color: '#2A5CAA',
            borderRadius: '6px',
            fontWeight: 'medium',
            '&:hover': {
              borderColor: '#3B8EFF',
              backgroundColor: 'rgba(42, 92, 170, 0.08)'
            }
          }}
          onClick={() => handleButtonClick('https://github.com/chatbookai/ai-to-pptx')}
        >
          项目前端
        </Button>
        <Button
          size={'small'}
          variant="outlined"
          sx={{
            borderColor: '#2A5CAA',
            color: '#2A5CAA',
            borderRadius: '6px',
            fontWeight: 'medium',
            '&:hover': {
              borderColor: '#3B8EFF',
              backgroundColor: 'rgba(42, 92, 170, 0.08)'
            }
          }}
          onClick={() => handleButtonClick('https://github.com/chatbookai/ai-to-pptx-backend')}
        >
          项目后端
        </Button>
        <Button
          size={'small'}
          variant="outlined"
          sx={{
            borderColor: '#2A5CAA',
            color: '#2A5CAA',
            borderRadius: '6px',
            fontWeight: 'medium',
            '&:hover': {
              borderColor: '#3B8EFF',
              backgroundColor: 'rgba(42, 92, 170, 0.08)'
            }
          }}
          onClick={() => handleButtonClick('https://pptx.dandian.net/')}
        >
          演示站点
        </Button> */}
        <Button
          size={'small'}
          variant={pageMode == "AiToPPTX" ? "contained" : "outlined"}
          sx={{
            ...(pageMode == "AiToPPTX" && {
              background: 'linear-gradient(135deg, #2A5CAA, #3B8EFF)',
              color: '#FFFFFF',
              fontWeight: 'bold',
              boxShadow: '0 2px 8px rgba(42, 92, 170, 0.3)',
              '&:hover': {
                background: 'linear-gradient(135deg, #1E437D, #2A5CAA)',
                boxShadow: '0 4px 12px rgba(42, 92, 170, 0.4)'
              },
              borderRadius: '6px'
            }),
            ...(pageMode != "AiToPPTX" && {
              borderColor: '#2A5CAA',
              color: '#2A5CAA',
              borderRadius: '6px',
              fontWeight: 'medium',
              '&:hover': {
                borderColor: '#3B8EFF',
                backgroundColor: 'rgba(42, 92, 170, 0.08)'
              }
            })
          }}
          onClick={() => setPageMode('AiToPPTX')}
        >
         设计编排
        </Button>
        <Button
          size={'small'}
          variant={pageMode == "Setting" ? "contained" : "outlined"}
          sx={{
            ...(pageMode == "Setting" && {
              background: 'linear-gradient(135deg, #2A5CAA, #3B8EFF)',
              color: '#FFFFFF',
              fontWeight: 'bold',
              boxShadow: '0 2px 8px rgba(42, 92, 170, 0.3)',
              '&:hover': {
                background: 'linear-gradient(135deg, #1E437D, #2A5CAA)',
                boxShadow: '0 4px 12px rgba(42, 92, 170, 0.4)'
              },
              borderRadius: '6px'
            }),
            ...(pageMode != "Setting" && {
              borderColor: '#2A5CAA',
              color: '#2A5CAA',
              borderRadius: '6px',
              fontWeight: 'medium',
              '&:hover': {
                borderColor: '#3B8EFF',
                backgroundColor: 'rgba(42, 92, 170, 0.08)'
              }
            })
          }}
          onClick={() => setPageMode('Setting')}
        >
          参数设置
        </Button>
      </Box>
    </Box>
  )
}

AiPPTXModel.getLayout = (page: ReactNode) => <BlankLayout>{page}</BlankLayout>

AiPPTXModel.guestGuard = true

export default AiPPTXModel
